<template>
	<view class="container">
		<view class="card-item" @click='humanDetail(item)'  v-for="item in list" :key="item.id">
			<view class="card-item-main">
				<text>{{item.jobName}}</text>
				<!-- <text>置顶中</text> -->
				<text>{{item.comprehensiveSalary==0||item.comprehensiveSalaryStart==null?'面议':item.comprehensiveSalaryStart+'-'+item.comprehensiveSalaryEnd+'元/月'}} | {{item.cityName}}*{{item.areaName}} | {{getWork(item.workExperienceTime)}}|{{getEdu(item.educationRequirements)}}</text>
			</view>
			<view class="abso" v-if="item.isTop==1">置顶中</view>
		</view>
		
	</view>
</template>
<script lang="ts" setup>
import {
		useRouter
	} from 'uni-mini-router'
	import {getEdu,getWork} from '@/utlis/common.js'
	let props = defineProps({
		list:{
			type: Array, // 类型
			default:()=>[]// 默认值
		}
	})
	const router = useRouter()
	const humanDetail = (item) => {
		console.log(9999)
		router.push({
			name: 'supplierJobDetail',
			params: {
				id:item.id
			}
		})
	}
</script>
<style lang="scss"  scoped>
	.container {
		width:100%;
		// padding:0 24rpx;
		// width: calc(100% - 30rpx);
		// margin: 10rpx auto;
		// height: 160rpx;
		// border: 1rpx solid #000;
		// border-radius: 10rpx;
		
		
		.card-item{
			height: 160rpx;
			padding: 30rpx 20rpx;
			border-radius: 18rpx;
			background:#fff;
			position:relative;
			margin-bottom:20rpx;
			
			.card-item-main{
				height:100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				text:nth-child(1){
					font-size: 34rpx;
					overflow: hidden; 
					white-space: nowrap; /* 禁止内容换行 */
					text-overflow: ellipsis; /* 超出部分显示省略号 */;
				}
				text:nth-child(2) {
					font-size: 26rpx;
				}
			}
			
		}
		
		.card-item:last-child{
			margin-bottom:0;
		}
		.abso {
			position: absolute;
			right: 0;
			top: 0;
			width: 140rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background:#d9d9d9;
			border-radius:10rpx;
		}
	}
</style>